<template>
    <nav class="crm-nav-default">
        <el-menu :default-active="activeIndex2" class="crm-menu" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"><router-link to="/trade/analysis">首页</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to="/trade/analysis">客户管理</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/trade/analysis">数据报表</router-link></el-menu-item>
            <el-submenu index="4">
                <template slot="title">CRM</template>
                <el-menu-item index="2-1"><router-link to="/trade/analysis" class="router-link">成交分析</router-link></el-menu-item>
                <el-menu-item index="2-2">我的营销顾问</el-menu-item>
                <el-menu-item index="2-3">我的关注客户</el-menu-item>
            </el-submenu>
        </el-menu>
    </nav>
</template>

<style lang="scss">
    @import "../scss/var.scss";

    .crm-nav-default{
        float: left;
    }

    .crm-menu.el-menu {
        background-color: $color-primary;

        &>.el-menu-item, &>.el-submenu>.el-submenu__title{
            color: white;
        }

        .el-submenu .el-submenu__icon-arrow{
            color: white;
        }

        .el-menu-item{
            padding: 0;
        }

        .el-menu-item,.el-submenu .el-submenu__title {
            border-bottom:none;
        }

        &> .el-menu-item:hover,
        &> .el-submenu:hover .el-submenu__title,
        &> .el-submenu.is-active .el-submenu__title {
           border-bottom:5px solid $color-active;
        }

        &>.el-submenu>.el-submenu__title:hover, &>.el-menu-item:hover{
             border-bottom:none;
             background-color: $color-primary;
        }

        &>.el-submenu.is-opened>.el-submenu__title, &>.el-menu-item.is-active{
             border-bottom:5px solid $color-active;
        }

        &>.el-menu-item>a{
            display: block;
            height: 60px;
            line-height: 60px;
            padding: 0 20px
        }

        .el-submenu .router-link-active{
            color: $color-primary;
        }

    }

</style>

<script>

import {MenuItem, Menu, Submenu} from 'element-ui'

export default {
    data() {
        return {
            activeIndex: '1',
            activeIndex2: '1'
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    components: {
        'el-menu-item' : MenuItem,
        'el-menu': Menu,
        'el-submenu': Submenu
    }
}
</script>
